/**
 * EmptyState - 空状态组件
 * 当没有消息时显示引导和示例
 */
import React from 'react';
import { motion } from "motion/react";
import { useChatContext } from '../ctx/ChatContext';
import { MessageSquarePlus, Zap, BookOpen, Coffee } from 'lucide-react';

const EmptyState: React.FC = () => {
    const { sendMessage } = useChatContext();

    const examples = [
        "请介绍一下你自己和你的功能",
        "请帮我解释一下大模型的工作原理",
        "如何使用React和TypeScript开发一个聊天应用？",
        "请写一个Python函数来查找数组中的最大值"
    ];

    return (
        <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="max-w-2xl mx-auto py-10 text-center"
        >
            <div className="w-20 h-20 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 mx-auto flex items-center justify-center mb-6">
                <MessageSquarePlus size={32} className="text-white" />
            </div>

            <h2 className="text-2xl font-bold mb-3">欢迎使用 AI 聊天助手</h2>
            <p className="text-gray-600 mb-8">
                我可以回答各种问题、提供解释、生成代码和更多功能。试着问我一些问题吧！
            </p>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="bg-white rounded-xl p-4 shadow-md border border-gray-100">
                    <Zap className="text-yellow-500 mb-2 mx-auto" size={24} />
                    <h3 className="font-medium mb-1">智能回答</h3>
                    <p className="text-sm text-gray-500">能够理解上下文，提供连贯对话</p>
                </div>

                <div className="bg-white rounded-xl p-4 shadow-md border border-gray-100">
                    <BookOpen className="text-green-500 mb-2 mx-auto" size={24} />
                    <h3 className="font-medium mb-1">知识丰富</h3>
                    <p className="text-sm text-gray-500">掌握广泛的主题和专业知识</p>
                </div>

                <div className="bg-white rounded-xl p-4 shadow-md border border-gray-100">
                    <Coffee className="text-blue-500 mb-2 mx-auto" size={24} />
                    <h3 className="font-medium mb-1">随时帮助</h3>
                    <p className="text-sm text-gray-500">随时为你解答疑问和提供支持</p>
                </div>
            </div>

            <div className="mt-8">
                <h3 className="font-medium mb-3">你可以尝试这些问题：</h3>
                <div className="flex flex-wrap justify-center gap-2">
                    {examples.map((example, index) => (
                        <motion.button
                            key={index}
                            whileHover={{ scale: 1.03 }}
                            whileTap={{ scale: 0.97 }}
                            className="bg-white px-4 py-2 rounded-full text-sm border border-gray-200 hover:border-blue-300 shadow-sm hover:shadow-md transition-all"
                            onClick={() => sendMessage(example)}
                        >
                            {example}
                        </motion.button>
                    ))}
                </div>
            </div>
        </motion.div>
    );
};

export default EmptyState;
